<template>
  <view class="index-page">
    <u-navbar
      title="实名认证"
      :background="{ background: '#111723' }"
      title-color="#fff"
      :title-bold="true"
      back-icon-color="#fff"
      :border-bottom="false"
    >
    </u-navbar>
    <view class="content" v-if="userInfo.is_real !== 1">
      <view class="row-input">
        <text class="name">姓名</text>
        <input
          placeholder="请输入姓名"
          v-model="form.real_name"
          maxlength="11"
        />
      </view>
      <view class="row-input">
        <text class="name">身份证</text>
        <input
          placeholder="请输入身份证"
          v-model="form.id_card"
          type="number"
        />
      </view>
      <view class="row-input">
        <text class="name">手机号</text>
        <input
          placeholder="请输入手机号"
          type="number"
          v-model="form.mobile"
          maxlength="11"
        />
      </view>
      <view class="row-input">
        <text class="name">验证码</text>
        <input
          placeholder="输入验证码"
          maxlength="6"
          type="number"
          v-model="form.code"
        />
        <view class="code" @click="getCodeClick">
          <text v-if="state.timeShow">获取验证码</text>
          <text v-else>{{ state.count }} s 后获取</text>
        </view>
      </view>
      <view class="register-btn" @click="registerClick">确认</view>
    </view>
    <view v-else class="content">
      <view class="row-input">
        <text class="name">姓名</text>
        <text class="text">{{ userInfo.real_name }}</text>
      </view>
      <view class="row-input">
        <text class="name">身份证</text>
        <text class="text">{{ userInfo.id_card }}</text>
      </view>
      <view class="row-input">
        <text class="name">手机号</text>
        <text class="text">{{ userInfo.mobile }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {
  realNameAuthentication,
  sendCode,
  getUserInfo
} from '@/api/modules/user'
import { default as useUserStore } from '@/store/modules/userInfo'
import { isMobile } from '@/utils/validate'
import { storeToRefs } from 'pinia'
import { reactive, onBeforeUnmount } from 'vue'
const store = useUserStore()
const { userInfo } = storeToRefs(store)

const form = reactive({
  id_card: '',
  mobile: '',
  code: '',
  real_name: ''
})
const state = reactive({
  // 倒计时
  countDownTime: 60,
  timer: null,
  timeShow: true,
  count: 0
})
const registerClick = () => {
  realNameAuthentication(form)
    .then(() => {
      getUserInfo().then((result) => {
        userInfo.value.is_real = result.data.is_real
        userInfo.value.is_real_text = result.data.is_real_text
        userInfo.value.real_name = result.data.real_name
        userInfo.value.id_card = result.data.id_card
        // store.$patch((state) => {
        //   state.userInfo = result.data
        // })
        uni.navigateBack({
          delta: 1 //返回层数，2则上上页
        })
      })
    })
    .catch((err) => {
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}

//获取短信验证码
const getCodeClick = () => {
  if (!isMobile(form.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'error'
    })
    return false
  }
  sendCode(form.mobile)
    .then((res) => {
      if (!state.timer) {
        state.count = state.countDownTime
        state.timeShow = false
        state.timer = setInterval(() => {
          if (state.count > 0 && state.count <= state.countDownTime) {
            state.count--
            console.log('count----', state.count)
          } else {
            state.timeShow = true
            clearInterval(state.timer as any)
            state.timer = null
          }
        }, 1000) as any
      }
      uni.showToast({
        title: '验证码发送成功,请注意查收',
        icon: 'success'
      })
    })
    .catch((err) => {
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}
onBeforeUnmount(() => {
  clearInterval(state.timer as any)
})
</script>
<style lang="less" scoped>
.content {
  padding: 40rpx;

  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 110rpx;
    padding: 0 30rpx;
    background-color: #2b2f41;
    border-radius: 8rpx;
    margin-bottom: 50rpx;
    font-size: 30rpx;

    .name {
      width: 150rpx;
      letter-spacing: 4rpx;
      color: #ffffff;
    }
    .text {
      flex: 1;
      color: #a1a2a3;
    }
    input {
      flex: 1;
      color: #a1a2a3;
    }

    .code {
      display: flex;
      justify-content: flex-end;
      letter-spacing: 2rpx;
      width: 180rpx;
      color: #1e70fe;
    }
  }

  .register-btn {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35rpx;
    letter-spacing: 15rpx;
    color: #ffffff;
    height: 110rpx;
    border-radius: 8rpx;
    background-image: linear-gradient(to right, #3feaea, #0168e6);
  }

  .tip-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #ffffff;
    letter-spacing: 4rpx;
    font-size: 28rpx;

    .link {
      color: #007aff;
    }
  }
}
</style>
